<template>
	<view class="content">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-active-color="rgba(0, 0, 0, 0)" indicator-color="rgba(0, 0, 0, 0)">
			<swiper-item v-for="item,index in bannerlist" :key="index">
				<view class="swiper-item">
					<img :src="item.imageUrl" alt="" class="imageitem">
				</view>
			</swiper-item>
		</swiper>

		<recommendsongs style="margin-top: 30rpx;" :songslist="recommendlist" title="为你推荐"></recommendsongs>
		<recommendsongs style="margin-top: 30rpx;" :songslist="newlist" title="新歌歌单"></recommendsongs>

		<scroll-view scroll-x="true" class='scroll-content'>
			<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='index'
				@tap='changeTab(index)'>
				<text :class='barIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<swiper circular="true" @change="onChangeTab" :current="barIndex" :indicator-dots="true" :duration="300" class="swiper-contant"
			:style="'height:'+swiperHeight+'px'">
			<swiper-item>
				<view>
					<view class="swiper-item">
						<List :datalist="zoomlist"></List>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<view class="swiper-item">
						<List :datalist="newsongslist"></List>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<view class="swiper-item">
						<List :datalist="rapsongslist"></List>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<view class="swiper-item">
						<List :datalist="foreignsongslist"></List>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import List from '@/common/index/list/list.vue'
	import recommendsongs from '@/common/index/recommendsongs/recommendsongs.vue'
	import music from '@/common/api/request.js'
	export default {
		data() {
			return {
				scrollIntoIndex: 'top0',
				swiperHeight: 3200,
				bannerlist: [],
				recommendlist: [],
				rapsongslist: [],
				newlist: [],
				barIndex: 0,
				zoomlist: [],
				newsongslist: [],
				foreignsongslist:[],
				topBar: [{
						name: '飙升榜'
					},
					{
						name: '热歌榜'
					},
					{
						name: '说唱榜'
					},
					{
						name: '欧美榜'
					},
				]
			}
		},
		components: {
			recommendsongs,
			List
		},
		onReady() {

		},
		onShow() {
			this.getbannerdata(),
				this.getsongsdata(),
				this.getsonglistdata(),
				this.getnewsongsdata(),
				this.getrapsongsdata(),
				this.getforeignsongsdata()
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:'/common/index/search/search'
			})
		},
		methods: {
			gotosearch(){
				console.log("999999")
			},
			changeTab(index) {
				this.barIndex = index
				this.scrollIntoIndex = 'top' + index

			},
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			getbannerdata() {
				music.request({
					url: '/banner'
				}).then((data) => {
					this.bannerlist = data.data.banners
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getsongsdata() {
				music.request({
					url: '/personalized'
				}).then((data) => {
					let oldlist = [...data.data.result]
					this.recommendlist = data.data.result.splice(0, 15)
					this.newlist = oldlist.splice(16, 30)
					uni.hideLoading()
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getsonglistdata() {
				music.request({
					url: '/playlist/detail?id=19723756'
				}).then((data) => {
					this.zoomlist = data.data.playlist.tracks.splice(0, 50)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getnewsongsdata() {
				music.request({
					url: '/playlist/detail?id=3779629'
				}).then((data) => {
					this.newsongslist = data.data.playlist.tracks.splice(0, 50)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getrapsongsdata() {
				music.request({
					url: '/playlist/detail?id=991319590'
				}).then((data) => {
					this.rapsongslist = data.data.playlist.tracks.splice(0, 50)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getforeignsongsdata() {
				music.request({
					url: '/playlist/detail?id=2809513713'
				}).then((data) => {
					this.foreignsongslist = data.data.playlist.tracks.splice(0, 48)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	.swiper-item {
		margin-top: 40rpx;
	}

	.imageitem {
		width: 90%;
		margin-left: 5%;
		border-radius: 30rpx;
	}

	.f-active-color {
		color: #02d15f;
		font-size: 48rpx
	}

	.f-color {
		color: #686868;
	}

	.scroll-item {
		width: 14%;
		padding: 40rpx;
		display: inline-block;
		font-size: 40rpx
	}

	.scroll-content {
		width: 100%;
		white-space: nowrap;
	}
</style>
